import React from "react";
import WrapFormItem from "components/wrap-form-item";
import { Col, Row, Select } from "antd";
import Searcher from "components/searcher";
import { messages } from "share/common";
const Option = Select.Option;
import symbolOption from './symbol-option'

const hasValue = value => value && value.symbol && value.values && value.values.length > 0;

export default {
  id: 'RECEIPT_TITLE', label: messages('financial-management.key930')/*购买方抬头名称*/,
  initialValue: { symbol: 'IN' },
  component: <WrapFormItem parser={value => value || { symbol: 'IN' }}>
    {(onChange, value) => (
      <Row gutter={10}>
        <Col span={10}>
          <Select
            style={{ width: '100%' }}
            onChange={innerValue => onChange(innerValue, 'symbol')}
            value={value.symbol}
            placeholder={messages('common.please.select')}
          >
            {symbolOption.map(item => <Option key={item.key}>{item.label}</Option>)}
          </Select>
        </Col>
        <Col span={14}>
          <Searcher
            type='vicp_titles'
            labelKey='key'
            onChange={innerValue => onChange(innerValue, 'values')}
            value={value.values}
          />
        </Col>
      </Row>
    )}
  </WrapFormItem>,
  hasValue,
  parser: value => hasValue(value) ? {
    'RECEIPT_TITLE': {
      symbol: value.symbol,
      values: value.values.map(item => item.key === messages('financial-management.key931')/*(空值)*/ ? '' : item.key)
    }
  } : null,
  tagParser: value =>
    `${symbolOption.find(item => item.key === value.symbol).label}: ` +
    `${value.values.map(item => item.key || messages('financial-management.key931')/*(空值)*/).join('、')}`
}
